<template>
  <div>
    <div class="wrap">
      <div class="mug-box">
        <div v-html="mugObj.title" class="mug-desc"></div>
        <button class="mug-buy">购买链接</button>
      </div>
      <li v-for="(item, index) in mugObj.img" :key="index">
        <img :src="item" alt="" />
      </li>
      <div class="line"></div>
      <div class="comment">
        <Comment />
      </div>
    </div>
  </div>
</template>

<script>
import Comment from "../../components/Comment";
export default {
  components: {
    Comment,
  },
  data() {
    return {
      mugObj: {},
    };
  },
  mounted() {
    this.$api.ChengpinDetails().then((res) => {
      if (res.data.success) {
        var obj = res.data.chengpinDetails[0];
        for (var i = 0; i < obj.img.length; i++) {
          obj.img[i] =
            "http://iwenwiki.com/api/" + String(obj.img[i]).slice(24);
        }
        obj.title = obj.title.replace(/ /g, "<br />");
        this.mugObj = obj;
      }
    });
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 1200px;
  margin: 0 auto;
  background: #fff;
}
.mug-box {
  border-top: 1px solid #fff;
  position: relative;
  width: 750px;
  margin: 0 auto;
  img {
    width: 750px;
    margin: 0 auto;
  }
  .mug-desc {
    margin: 44px 0 40px;
    color: #109d59;
    font-size: 30px;
    white-space: nowrap;
  }
  .mug-buy {
    background: rgb(255, 38, 0);
    font-size: 20px;
    padding: 5px 10px;
    color: #fff;
    letter-spacing: 10px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
  }
}
.line {
  width: 750px;
  height: 3px;
  background: #f5f5f5;
  margin: 0 auto;
}
.comment {
  padding: 30px 0 50px;
}
</style>